<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:composition template="/templates/templateLayout.xhtml">

	<f:metadata>
		<f:viewParam name="id" value="#{barrioBean.id}" />
		<f:event type="preRenderView" listener="#{barrioBean.inicio()}" />
	</f:metadata>


	<ui:define name="centerContent">
		<script type="text/javascript"
			src="http://maps.google.com/maps/api/js?sensor=true"></script>
		<h:form id="create">
			<h:panelGroup layout="block"
				class="title ui-widget-header ui-corner-all"
				style="padding: 8px; font-size: 16px !important; text-align: center;">

				<h:outputText value="#{msgs['form.barrio.modificar']}"
					rendered="#{!empty barrioBean.entity.id}" />
				<h:outputText value="#{msgs['form.barrio.alta']}"
					rendered="#{empty barrioBean.entity.id}" />

				<p:panel id="panelCreate">
					<p:messages  showDetail="true"  closable="true" showSummary="true"/>
					

					<p:panelGrid style="width: 100%;text-align:left">
						<p:row>
							<p:column style="width: 15%;">
								<h:outputLabel for="barrioBeanTaskDescription"
									value="#{msgs['form.nombre']}#{msgs.obligatorio}" />
							</p:column>
							<p:column style="width: 20%;">
								<p:inputText id="barrioBeanTaskDescription"
									value="#{barrioBean.entity.descripcion}" />
								<p:message for="barrioBeanTaskDescription" />
							</p:column>
							<p:column style="width: 10%;">
								<h:outputLabel for="barrioBeanTaskZona"
									value="#{msgs['form.zona']}#{msgs.obligatorio}" />
							</p:column>
							<p:column style="width: 20%;">
								<p:selectOneMenu value="#{barrioBean.entity.zona}"
									id="barrioBeanTaskZona" effect="fade">
									<f:selectItems value="#{utilsBean.zonas()}" />
								</p:selectOneMenu>
								<p:message for="barrioBeanTaskZona" />
							</p:column>
						
							<p:column style="width: 15%;">
								<h:outputText value="#{msgs['form.ciudad']}#{msgs.obligatorio}" />
							</p:column>
							<p:column style="width: 20%;">
								<p:selectOneMenu value="#{barrioBean.entity.ciudad}"
									converter="#{ciudadConvert}" effect="fade">
									<f:selectItems value="#{ciudadBean.ciudades}" var="p"
										itemLabel="#{p.descripcion}" itemValue="#{p}"
										onValue="Seleccione Ciudad" />
								</p:selectOneMenu>
							</p:column>
						</p:row>
					</p:panelGrid>
					
					<p:spacer height="20px"></p:spacer>
					<p:gmap id="gmap" fitBounds="true"  
						center="#{barrioBean.coordenadas.lat},#{barrioBean.coordenadas.lng}"
						zoom="13" type="MAP" style="width:100%;height:250px"
						model="#{barrioBean.mapaModel}" draggable="true"
						streetView="false" mapTypeControl="false"
						navigationControl="false" widgetVar="map">
						<p:ajax event="markerDrag" listener="#{barrioBean.onMarkerDrag}" />
						<p:ajax event="overlaySelect"
							listener="#{barrioBean.onMarkerSelect}" />
						<p:gmapInfoWindow>
							<p:outputPanel
								style="text-align:center;display:block;margin:auto:">
								<h:panelGrid columns="1">
								#{barrioBean.marker.title}
									<p:commandLink action="#{barrioBean.eliminarPunto()}"
										style="color:#FF0000;" update=":create:gmap">Eliminar</p:commandLink>
								</h:panelGrid>
							</p:outputPanel>
						</p:gmapInfoWindow>

					</p:gmap>
					<p:toolbar>
						<p:toolbarGroup>
							<p:commandButton value="Agregar Punto" onclick="dlg_map.show();" />
						</p:toolbarGroup>
					</p:toolbar>

					<f:facet name="footer">
						<ui:include src="/templates/toolbarCreate.xhtml">
							<ui:param name="bean" value="#{barrioBean}" />
						</ui:include>
					</f:facet>
				</p:panel>
			</h:panelGroup>



		</h:form>



		<h:form id="formDialog" prependId="false">
			<p:dialog widgetVar="dlg_map" width="350" height="160"
				header="Punto de Interes" closeOnEscape="true" showEffect="clip"
				hideEffect="clip" closable="true" resizable="false">
				<h:panelGrid columns="2"
					columnClasses="developersCol1,developersCol2" style="margin: 10px;">
					<h:outputText value="Tipo" />
					<p:selectOneMenu value="#{barrioBean.puntoInteres.tipo}" var="p">
						<f:selectItems value="#{utilsBean.tipoPuntoInteres}" />
						<p:column>
							<p:graphicImage value="/resources/images/#{p.toString()}.png"
								width="32" height="32" />
						</p:column>
						<p:column>  
							#{p.toString()} 
					    </p:column>
					</p:selectOneMenu>
					<h:outputText value="Descripcion" />
					<p:inputText value="#{barrioBean.puntoInteres.descripcion}" />
					<h:outputText value="Direccion" />
					<p:inputText value="#{barrioBean.puntoInteres.direccion}"
						id="calle">
						<p:ajax event="change" oncomplete="geolocalizar();" />
					</p:inputText>
					<h:outputText value="Numero" />
					<pe:inputNumber value="#{barrioBean.puntoInteres.numero}"
						id="numero" decimalPlaces="0">
						<p:ajax event="change" oncomplete="geolocalizar();" />
					</pe:inputNumber>

					<h:inputHidden id="lat"
						value="#{barrioBean.puntoInteres.coordenada.lat}" />
					<h:inputHidden id="lng"
						value="#{barrioBean.puntoInteres.coordenada.lng}" />

				</h:panelGrid>


				<f:facet name="footer">
					<h:panelGroup layout="block"
						style="text-align: right; padding: 2px;">
						<h:panelGroup layout="block"
							style="text-align:center; padding-bottom:8px; font-style:italic;">
						</h:panelGroup>
						<p:commandButton type="button" value="Cancelar"
							onclick="dlg_map.hide()" />
						<p:commandButton value="Grabar" 	action="#{barrioBean.agregarPuntoInteres()}"
							oncomplete="dlg_map.hide()" update=":create:gmap, :formDialog" />
					</h:panelGroup>
				</f:facet>
			</p:dialog>
		</h:form>



		<script type="text/javascript">
				var currentMarker = null;
				var geocoder = new google.maps.Geocoder();
				function geolocalizar(){	
					
					var direccion = $('#calle').val() +" "+  $('#numero_input').val() +" , "+ 'viedma'; 	
					
					if (($('#calle').val()!='') &#38;&#38; ($('#numero_input').val()!=''))
					{
						geocoder.geocode({'address': direccion}, function(results, status) {
							if (status == google.maps.GeocoderStatus.OK) { 
								$('#lat').val(results[0].geometry.location.lat());
								$('#lng').val(results[0].geometry.location.lng());								
							}else 
							{
								alert("Error " + status); 
							} 
						});			
					}					
				}	
				
			</script>

	</ui:define>

</ui:composition>
</html>
